<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>自定义指令</title>
		<script src="../../JS/vue.js"></script>
	</head>
	<body>
		<!-- 
          需求1：定义一个v-big指令,和v-text功能类似，
          但会把绑定的数值放大10倍。
          需求2：定义一个v-fbind指令，v-bind功能类似，
          但可以让其他所绑定的input元素默认获取焦点。
          自定义指令总结
               一、定义语法
                    (1).局部指令：
                          new Vue({
                            directives:{
                                指令名:配置对象
                            }
                          })
                        或   
                         new Vue({
                            directives:{
                                指令名:回调函数
                            }
                          })
                        
                      (2).全局指令:
                            Vue.direactive(指令名,配置对象) 
                            Vue.direactive(指令名,回调函数)

                二、配置对象中常用的三个回调：
                   (1)bind:指令与元素成功绑定的时候调用
                   (2)inserted:指令所载元素被插入页面是调用
                   (3)update:指令所在模板结构被重新解析是调用  
                三、备注：
                      1、指令定义是不加v-,但是用的时候要加v-
                      2、指令名如果是多个单词，要是用kebab-case命名方式  
                     不要用小驼峰
                    -->
		<div id="root">
			<h2>当前的n值是<span v-text="n"></span></h2>
			<!-- <h2>放大10倍的n值是<span v-big-number="n"></span></h2> -->
			<h2>放大10倍的n值是<span v-big-number="n"></span></h2>
			<button @click="n++">点我n+1</button>
			<hr />
			<input type="text" v-fbind:value="n" />
		</div>

		<script>
			Vue.config.productionTip = false //阻止 vue 在启动时产生提示
			// 全局指令
			// Vue.directives('fbind', {
			// 	bind(ele, binding) {
			// 		// console.log('bind', ele, binding, this)
			// 		ele.value = binding.value
			// 	},
			// 	// 指令所在元素被插入页面时
			// 	inserted(ele, binding) {
			// 		// console.log('inserted',ele, binding)
			// 		ele.focus()
			// 	},
			// 	// 指令所在的模板被重新解析时
			// 	update(ele, binding) {
			// 		// console.log('update', ele, binding)
			// 		ele.value = binding.value
			// 	}
			// })
			// Vue.directives('bigNumber', function (ele, binding) {
			// 	ele.innerText = binding.value * 10
			// })

			const vm = new Vue({
				el: '#root',
				data: {
					n: 1
				},
				directives: {
					// big函数何时会被调用？
					// 1、指令与元素成功绑定(一上来)
					// 2、指令所咋在的模板被重新解析时。
					// bigNumber(ele, binding) {
					// 	ele.innerText = binding.value * 10
					// },
					bigNumber(ele, binding) {
						ele.innerText = binding.value * 10
					},
					fbind: {
						// 指令与元素成功绑定时(一上来)
						bind(ele, binding) {
							console.log('bind', ele, binding, this)
							ele.value = binding.value
						},
						// 指令所在元素被插入页面时
						inserted(ele, binding) {
							// console.log('inserted',ele, binding)
							ele.focus()
						},
						// 指令所在的模板被重新解析时
						update(ele, binding) {
							// console.log('update', ele, binding)
							ele.value = binding.value
						}
					}
				}
			})
		</script>
	</body>
</html>
